<div class="slider gap-8 flex justify-center items-center">
  <mat-slider
    [style.width]="'100%'"
    [tabIndex]="to.tabIndex"
    [color]="to.color"
    [min]="to.min"
    [max]="to.max"
    [step]="to.step"
    [discrete]="to.thumbLabel"
  >
    <input [id]="id" [formlyAttributes]="field" [formControl]="formControl" matSliderThumb />
  </mat-slider>
  <div
    class="value flex justify-center items-center rounded-md box-border opacity-70 whitespace-nowrap"
  >
    <input matInput class="text-center" [formlyAttributes]="field" [formControl]="formControl" />
    <span class="suffix">{{ to.unit || '' }}</span>
  </div>
</div>
